<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>结点对象与原型链</title>
  </head>
  <body class="mine">
    <!-- 我是一个注释 -->
    <div id="jim">Jimmy</div>
    <script>
      /*
        在DOM的理解中 HTML是由一个一个的结点所构成的，一共有分为12种结点
          没有必要将12种结点都理解是什么意思  因为我们真正会使用到比较多的结点就是
            元素的标签结点

            可以记得结点类型有一下
              标签结点    结点类型 1
              属性结点(attributes class之类)    结点类型 2
              文本结点(空白 换行 文本)    结点类型  3
              注释结点        结点类型 8
              document结点   结点类型9

      */
      /*
          document结点是一个树状的结构 下面有很多很多结点
        */
      console.log(document.nodeType) // 9 说明document结点类型是9
      console.log(document.body.nodeType) // 1 shuom元素标签结点的结点类型是1

      /* HTML当中的所有东西都是结点 标签的属性就也是一种结点 */
      console.log(document.body.attributes[0]) // class="mine"
      console.log(document.body.attributes[0].nodeType) //2  标签的额属性的结点那类型

      /*
        使用一个 DOM.childNodes可以来获取某个DOM对象的子节点
          通常在使用的时候会配合上索引来一起使用  如 DOM.childNodes[0]  DOM.childNodes[1]
      */
      console.log(document.body.childNodes) //打印出结点数组
      console.log(document.body.childNodes[0])
      console.log(document.body.childNodes[0].nodeType) //3  文本结点的类型是3
      /*
        #text  也就是说第一个是文本结点  这个可以理解成是标签之间的空格  换行二形成的一段文本
          虽然我们可能看的时候感觉好像没有 但是实实在在确实是存在的一个文本结点

          文本的结点类型是3
      */
      console.log(document.body.childNodes[1]) // 打印注释
      console.log(document.body.childNodes[1].nodeType) // 8   注释的文本类型是8

      /* 继承关系 */
      let div = document.getElementById('jim')
      console.dir(div) //使用console.dir打印可以看出其实是标签是一个对象  经过了多层的继承最后得出来的标签

      // 使用继承打印出原型链上的数据
      function getFather(div) {
        let p = Object.getPrototypeOf(div) // 使用Object原型对象的getPrototypeOf()方法来获取当前对象的父级
        console.log(p)
        Object.getPrototypeOf(p) ? getFather(p) : ''
        /*
          以上是一个回调  可以打印出所有的继承关系  我们的标签结点之所以会有很多非常非常好用的方法
            原因上其实是因为经过了多层的继承  继承了很多父类的方法

            我们也可以使用修改继承关系让某些对象拥有一些其他的方法
        */
      }
      getFather(div)
    </script>
  </body>
</html>
